<!-- 登录信息查询 mengrang 2017-6-21 16:20:25 -->
<template>
  <div>
    <!-- 查询条件 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px">
      <el-form :inline="true" :model="loginInfo">
        <el-form-item v-if="isSelect">
          <el-select v-model="loginInfo.accountType" size="small" placeholder="账号类型" style="vertical-align:top;width:130px;" clearable id="el-select">
            <el-option label="运营" value="0"></el-option>
            <el-option label="供应链" value="1"></el-option>
            <el-option label="门店" value="2"></el-option>
            <el-option label="会员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isSelect">
          <el-select v-model="loginInfo.companyId" size="small" placeholder="企业品牌" style="vertical-align:top;width:130px;" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.brandName"
                  :value="item.id">
                </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isSelect">
          <el-select v-model="loginInfo.channel" size="small" placeholder="渠道" style="vertical-align:top;width:130px;" clearable id="el-select">
            <el-option label="其他" value="0"></el-option>
            <el-option label="官网" value="1"></el-option>
            <el-option label="小程序" value="2" ></el-option>
            <el-option label="h5" value="3"></el-option>
            <el-option label="iphone" value="4"></el-option>
            <el-option label="android" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginInfo.loginName" size="small" placeholder="登录名" style="vertical-align:top;width:180px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginInfo.loginPosition" size="small" placeholder="登录位置" style="vertical-align:top;width:180px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="loginInfo.queryBegin" size="small" type="date" placeholder="开始日期" @change="datebj" style="vertical-align:top;width:180px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="loginInfo.queryEnd" size="small" type="date" placeholder="结束日期" @change="datebj" style="vertical-align:top;width:180px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search" size="small" style="vertical-align:top;line-height:14px">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table :data="loginInfoList" v-loading="listLoading" border style="width: 100%; font-size: 12px;">
      <el-table-column align="center" :formatter="accountType2CH" label="账号类型" v-if="notCustom" ></el-table-column>
      <el-table-column align="center" :formatter="brandNameTransf" label="企业品牌" v-if="notCustom" ></el-table-column>
      <el-table-column align="center" prop="loginName" label="登录名" ></el-table-column>
      <el-table-column align="center" prop="loginIP" label="登录IP" ></el-table-column>
      <el-table-column align="center" prop="loginPosition" label="登录位置" ></el-table-column>
      <el-table-column align="center" :formatter="channel2CH" label="渠道" ></el-table-column>
      <el-table-column align="center" :formatter="createTimeStr" label="登录时间" ></el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-col :span="24" class="toolbar" style="margin-top: 15px;height: 50px;float: right;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="total" style="float: right;">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        id: 0,
        account: {
          type: ''
        },
        listLoading: false,
        loginInfoList: [],
        total: 2,
        pageNumber: 1,
        pageSize: 10,
        loginInfo: { // 查询内容字段
          accountType: '', // 账号类型
          channel: '', // 渠道
          companyId: '', // 企业id
          loginName: '', // 用户名
          loginPosition: '', // 登录位置
          queryBegin: '',
          queryEnd: ''
        },
        isSelect: false,
        notCustom: true,
        options: [] // 企业品牌
      }
    },
    methods: {
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initLogInfo()
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.pageNumber = val
        this.currentPage = val
        this.initLogInfo()
      },
      // 状态
      accountType2CH (row, column) {
        if (row.accountType === 0) {
          return '运营'
        } else if (row.accountType === 1) {
          return '供应链'
        } else if (row.accountType === 2) {
          return '门店'
        } else if (row.accountType === 3) {
          return '会员'
        }
      },
      // 渠道中文
      channel2CH (row, column) {
        if (row.channel === 0) {
          return '其他'
        } else if (row.channel === 1) {
          return '官网'
        } else if (row.channel === 2) {
          return '小程序'
        } else if (row.channel === 3) {
          return 'H5'
        } else if (row.channel === 4) {
          return 'iPhone'
        } else if (row.channel === 5) {
          return 'android'
        }
      },
      brandNameTransf (row, column) {
        if (row.brandName === null || row.brandName === undefined) {
          return '无品牌信息'
        } else {
          return row.brandName
        }
      },
      // 时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = ((d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))
        var date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
        var hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
        var minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
        var second = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds())
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 日期对比
      datebj () {
        if (this.queryFeedback.queryBegin !== '') {
          if (this.queryFeedback.queryEnd !== '') {
            if (this.queryFeedback.queryBegin > this.queryFeedback.queryEnd) {
              this.$message({
                showClose: true,
                message: '结束日期需大于开始日期',
                type: 'error'
              })
            }
          }
        }
      },
      search () {
        this.pageNumber = 1
        this.initLogInfo()
      },
      initLogInfo () {
        this.listLoading = true
        var para = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          accountType: this.loginInfo.accountType, // 账号类型
          channel: this.loginInfo.channel, // 渠道
          companyId: this.loginInfo.companyId, // 企业id
          loginName: this.loginInfo.loginName, // 登录名
          loginPosition: this.loginInfo.loginPosition, // 登录位置
          queryBegin: this.loginInfo.queryBegin,
          queryEnd: this.loginInfo.queryEnd,
          type: this.account.type
        }
        this.$http.post('/smartLight/web/baseAccount/getLoginInfoList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.loginInfoList = resBody.result.content
          } else {
            if (resBody.isSuccess === 1) {
              sessionOut(this) // session超时处理
            } else if (resBody.isSuccess !== 0) {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.account.type = user.type
        // 浏览器向前或向后处理
        resetBreads(this)
        // 运营用户加载公司品牌信息
        if (this.account.type === 0) {
          this.isSelect = true
          // 查询企业品牌信息
          this.$http.post('/smartLight/web/baseCompany/getCompanyBrands.htm', {type: this.account.type}).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.options = resBody.list
            }
          })
        } else if (this.account.type === 3) {
          this.notCustom = false
        }
        this.initLogInfo()
      } else {
        this.$alert('登录超时，请重新登录', ' ', {
          type: 'warning'
        }).then(() => {
          this.$router.push({path: '/login'})
          sessionStorage.clear()
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
#el-select
  .el-input
    vertical-align:top;
</style>
